<script>
import {axisPage, axisWarehousesAll} from "@/api/instorage";
import {suppliersList} from "@/api/goodsNews";

export default {
    data(){
        return{
            queryParams:{
                productsName:null,
                supplierId: null,
                warehousesId:null,
                pageNum:1,
                pageSize:5,
                total:0,
                pages:0,
            },
            suppliers:[],
            stashs:[],
            inStorageList:[],
            showSearch:true
        }
    },
    methods:{

        supplier(){
            let that = this
            that.queryParams.pageNum=1
            suppliersList().then(function (res){
                if (res.code == 200){
                    that.suppliers = res.data
                }else {
                    that.$message.error("获取供应商失败")
                }
            })
        },
        inStorages(){
            let that = this
            axisWarehousesAll().then(function (res){
                if (res.code == 200){
                    that.stashs = res.data
                }else {
                    that.$message.error(res.mess)
                }
            })
        },


        selGetPage() {
            let that = this
            axisPage(that.queryParams).then(function (res){
                if (res.code == 200){
                    that.inStorageList = res.data.records
                    that.queryParams.total =  res.data.total
                    that.queryParams.pages =  res.data.pages
                    that.queryParams.pageSize = res.data.size
                }else {
                    that.$message.error(res.mess)
                }
            })
        },
        currentChange(number){
            let that = this
            that.queryParams.pageNum = number
            that.selGetPage()
        },
        handleQuery(){
            let that = this
            that.queryParams.pageNum = 1
            that.selGetPage()
        },
        resetQuery(){
            window.location.reload()
        }
    },
    created() {
        let that = this
        that.selGetPage()
        that.supplier()
        that.inStorages()
    }
}
</script>

<template>
  <div>
    <h4>基本信息</h4>
      <el-form :model="queryParams" style="text-align: left;font-weight: bolder" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
          <el-form-item label="产品名称" prop="productsName">
              <el-input
                      v-model="queryParams.productsName"
                      placeholder="请输入产品名称"
                      clearable
                      @keyup.enter.native="handleQuery"
              />
          </el-form-item>
          <el-form-item label="供应商" prop="supplierId">
              <el-select v-model="queryParams.supplierId" placeholder="请选择供应商">
                  <el-option label="--请选择供应商--" value="0" key="0"></el-option>
                  <el-option
                      v-for="s in suppliers"
                      :label="s.name" :value="s.id" :key="s.id">
                  </el-option>
              </el-select>
          </el-form-item>
          <el-form-item label="仓库" prop="warehousesId">
              <el-select v-model="queryParams.warehousesId" placeholder="请选择仓库">
                  <el-option label="--请选择仓库--" value="0" key="0"></el-option>
                  <el-option
                      v-for="s in stashs"
                      :label="s.name" :value="s.id" :key="s.id">
                  </el-option>
              </el-select>
          </el-form-item>
          <el-form-item>
              <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
      </el-form>

      <h4>商品信息</h4>
      <el-table
          :data="inStorageList"
          style="width: 100%">
          <el-table-column
              prop="inboundId"
              label="商品ID"
              align="center"
          >
          </el-table-column>
          <el-table-column
              prop="productName"
              label="商品名称"
              align="center"
          >
          </el-table-column>
          <el-table-column
              prop="supplierName"
              label="供应商">
          </el-table-column>
          <el-table-column
              prop="warehouseName"
              label="仓库">
          </el-table-column>
          <el-table-column
              prop="receivedData"
              label="入库时间">
          </el-table-column>
          <el-table-column
              prop="quantity"
              label="采购数量">
          </el-table-column>
          <el-table-column
              prop="price"
              label="单价">
          </el-table-column>
          <el-table-column
              label="状态">
                  {{'入库'}}
          </el-table-column>
      </el-table>
      <el-pagination
          background
          layout="total,prev, pager, next,jumper"
          :total="queryParams.total"
          :page-size="queryParams.pageSize"
          :current-page="queryParams.pageNum"
          @current-change="currentChange"
      >
      </el-pagination>
  </div>
</template>

<style scoped>

</style>